<script lang="ts">
import {defineComponent, onMounted, reactive, ref, toRefs} from 'vue'
import {getPageData, removeById, type UserInfo} from "@/views/system/user/ui/data/data.ts";
import {PageParam, QueryParamConfig, TableListConfig} from "@/components/pageTable/types/type.ts";
import PageTable from "@/components/pageTable/pageTable.vue";
import {sendGlobalMessage} from "@/hooks/globalmessage.ts";


export default defineComponent({
  name: 'userUI',
  components: {PageTable},


  setup() {

    onMounted(() => {
      console.log("---")
      methods.init()
    })
    const data = reactive({
      userList: [] as UserInfo[],
      queryParam: {
        nickname: '',
        status: ''
      },
      page: new PageParam<object>(),
      loading: false,
      total: 0,
      /*
      *  id: "011",
        username: "litchiUser011",
        nickname: "荔枝的ikun",
        gender: 1,
        birthday: "2020-01-01",
        status: 1,*/
      queryConfigList: <QueryParamConfig[]>[
        new QueryParamConfig().buildLabel("昵称").buildProp("nickname"),
        new QueryParamConfig().buildLabel("状态").buildProp("status").buildCustomSlotName("queryStatusSlot")
      ],
      tableConfigList: <TableListConfig[]>[
        new TableListConfig().buildLabel("账号").buildProp("username"),
        new TableListConfig().buildLabel("昵称").buildProp("nickname"),
        new TableListConfig().buildLabel("性别").buildProp("gender").buildCustomSlotName("tableGenderSlot"),
        new TableListConfig().buildLabel("出生日期").buildProp("birthday"),
        new TableListConfig().buildLabel("状态").buildProp("status").buildCustomSlotName("tableStatusSlot"),
        new TableListConfig().buildLabel("操作").buildProp("operation").buildCustomSlotName("tableOperationSlot"),
      ],


    })

    const methods = {
      async init() {
        data.loading = true;
        data.page.buildParam(data.queryParam)
        const res = await getPageData(data.page)
        data.loading = false
        if (res.isSuccess()) {
          data.userList = res.data?.list
          data.total = res.data?.total

        }

      },
      search(param: any) {
        methods.init()
      },
      currentPageChange(pageParam: PageParam<any>) {
        console.log(pageParam)
        data.page.buildCurrent(pageParam.current)
        methods.init()
      },
      sizeChange(pageParam: PageParam<any>) {
        console.log(pageParam)
        data.page.buildSize(pageParam.size)
        methods.init()
      },
      handlerChangeItem(arr: []) {
        console.log(arr)
      },
      edit(row: any) {
        console.log(row)
      },
      async deleteRow(row: any) {

        data.loading = true
        let res = await removeById(row.id)
        data.loading = false
        if (res.isSuccess()) {
          sendGlobalMessage("删除成功")
          await methods.init()
        }
      },

    }

    const validators = {}


    const rules = reactive({})

    const refs = {}


    return {
      ...toRefs(data),
      ...methods,
      ...refs,
      validators,
      rules,

    }
  }
})
</script>

<template>
  <div>
    <el-text>组件page-table</el-text>
    <page-table :auto-search="false"
                v-loading="loading"
                :table-data="userList"
                :total="total"
                v-model:query-param="queryParam"
                :table-config-list="tableConfigList"
                :query-config-list="queryConfigList"
                @search="search"
                @current-page-change="currentPageChange"
                @size-change="sizeChange"
                @handle-change-item="handlerChangeItem"
    >
      <template #queryStatusSlot>
        <el-select v-model="queryParam.status" clearable placeholder="请选择状态">
          <el-option :label="item.label"
                     :value="item.value"
                     :key="item.value"
                     v-for="(item) in [{label:'正常',value:1},{label:'禁用',value:0}]">

          </el-option>
        </el-select>
      </template>

      <template #tableGenderSlot="{row,index}">
        {{ row.gender == 1 ? '男' : '女' }}
      </template>
      <template #tableStatusSlot="{row,index}">
        {{ row.status == 0 ? '禁用' : '正常' }}
      </template>
      <template #tableOperationSlot="{row,index}">
        <el-button type="text" @click="edit(row)">编辑</el-button>
        <el-button type="text" @click="deleteRow(row)">删除</el-button>
      </template>
    </page-table>
  </div>
</template>

<style scoped>

</style>